<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="para">单击此处更改此文本</p>
    <p>此示例使用addEventListener()方法将2个单击事件附加到按钮</p>
    <button id="ppp">点我</button>
    <button id="qqq">恢复原样</button><br>
    <button id="ttt">点我改变下方文本</button><br>
    <p id="sss">114514</p>
    <p>点击文档中的任意位置</p><br>
    <p>尝试调整此框架的大小(手动)：</p><br>
    <div id="box">00.00</div>

    <p>单击按钮以删除事件处理程序：</p>

    <button onclick="removeHandler()">删除事件</button>

    <p id="para2">将鼠标移到此处... </p>

    <script>
        // 事件监听添加到元素
        //事件监听有3个值 分别是 类型，要调用的函数，布尔值（选择事件冒泡还是事件捕获）
        let para = document.querySelector("#para");
        // para.addEventListener("click", function() {
        //     this.innerHTML = "Hello world"
        // })
        //也可以引用外部命名函数
        para.addEventListener("click", changeText);

        function changeText() {
            this.innerHTML = "Hello world";
        }
        //可以把多个事件监听添加到同一元素
        document.querySelector("#ppp").addEventListener("click", changeColor);
        document.querySelector("#ppp").addEventListener("click", anotherFunc);
        document.querySelector("#qqq").addEventListener("click", Func);

        function changeColor() {
            let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
            document.body.style.backgroundColor = color;
        }

        function random(number) {
            return Math.floor(Math.random() * (number + 1));
        }

        function anotherFunc() {
            let size = random(4) + "rem";
            document.body.style.fontSize = size;
        }

        function Func() {
            document.body.style.fontSize = "1rem";
            document.body.style.backgroundColor = "rgb(255,255,255)";
        }
        //传递参数值（使用匿名函数）
        var x = 1919805;
        var y = 5;

        var btn = document.querySelector("#ttt");
        btn.addEventListener("click", function() {
            myFunc(x, y);
        })

        function myFunc(a, b) {
            var ans = a + b;
            document.getElementById("sss").innerHTML = ans;
        }

        //将事件监听附加到文档示例
        document.addEventListener("click", function() {
            alert("你好");
        });
        //调整框架大小
        window.addEventListener("resize", function() {
            document.getElementById("box").innerHTML = Math.random();
        });

        //还可以用removeEventListener()方法从元素中删除一个或所有事件
        // 使用以下代码将事件处理程序附加到 id="para"
        var para2 = document.getElementById("para2");

        function myFunc2() {
            para2.innerHTML = Math.random();
        }
        para2.addEventListener("mousemove", myFunc2);

        function removeHandler() {
            //从id="para2"的P元素中删除事件处理程序
            para2.removeEventListener("mousemove", myFunc2);
        }
    </script>
</body>

</html>